<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { reactive, onMounted, onUnmounted } from 'vue'

const Rocket = reactive({
  show: false
})
const scrolltoTop = (to = 0, rate = 6) => {
  let target = document.scrollingElement
  let scrollTop = target.scrollTop

  const animationToTop = function () {
    scrollTop = scrollTop + (to - scrollTop) / rate

    if (Math.abs(scrollTop - to) <= 1) {
      target.scrollTop = to
      return
    }
    target.scrollTop = scrollTop
    requestAnimationFrame(animationToTop)
  }
  animationToTop()
}

const show_rocket = () => {
  let scrollValue = window.scrollY
  let windowHeight = window.innerHeight

  let seventyFivePercentWindow = 0.3 * windowHeight
  Rocket.show = scrollValue > seventyFivePercentWindow
}

onMounted(() => {
  window.addEventListener('scroll', show_rocket)
})

onUnmounted(() => {
  window.removeEventListener('scroll', show_rocket)
})
</script>

<template>
  <a
    v-show="Rocket.show"
    @click="scrolltoTop()"
    class="scroll-top btn btn-link btn-action uni-bg bg-blur uni-shadow flex-center"
    ><i class="czs-rocket"></i
  ></a>
</template>
